<%--
  Created by IntelliJ IDEA.
  User: 29688
  Date: 2021/3/27
  Time: 18:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <title>商品详情</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/common.css">
    <link rel="icon" href="${pageContext.request.contextPath}/img/ico/pig01.ico">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/detail.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui-v2.5.7/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui-v2.5.7/layui/layui.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui-v2.5.7/layui/css/layui.css" media="all">
    <script src="${pageContext.request.contextPath}/js/jquery.js"></script>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/layui-v2.5.7/layui/css/layui.css"
          media="all">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/layui-v2.5.7/layui/css/admin.css"
          media="all">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui-v2.5.7/layui/css/template.css" media="all">
    <script src="${pageContext.request.contextPath}/layui-v2.5.7/layui/layui.js"></script>
    <style>
        body {
            background-color: #FFFFFF;
        }
    </style>
</head>
<body>
<div id="show">
    <div class="container" id="stage">
        <div id="show_left" class="box" onclick="changeCard()">
            <img src="${book.url}" alt="">
            <h5>${book.description}</h5>
        </div>
        <div id="show_right">
            <h3>${book.bname}</h3>
            <div class="detail">
                <p class="now_price">单价：<i class="yuan">￥</i><span class="price">${book.price}</span></p>
                <p class="now_price">库存：<span>${book.count}</span></p>
            </div>
            <p>购买数量：</p>
            <div id="slideTest8" style="background-color: #FFFFFF;margin: 15px 0" class="demo-slider"></div>
            <c:if test="${!empty book.uid}" var="hadUid">
                <button type="button" class="layui-btn layui-btn-warm" id="chart">联系发布者</button>
            </c:if>
            <c:if test="${empty book.uid}">
                <button type="button" class="layui-btn layui-btn-warm" id="addChart">加入购物车</button>
            </c:if>
        </div>
    </div>
</div>
<div class="layui-fluid layadmin-message-fluid">
    <div class="layui-row">
        <div class="layui-col-md12">
            <form class="layui-form" style="padding: 0 40px">
                <div class="layui-form-item layui-form-text">
                    <div class="layui-input-block">
                        <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
                    </div>
                </div>

                <div class="layui-form-item" style="overflow: hidden;">
                    <div class="layui-input-block layui-input-right">
                        <input type="button" class="layui-btn" lay-submit lay-filter="formDemo" value="发表"/>
                    </div>
                </div>
            </form>
        </div>
        <div class="layui-col-md12 layadmin-homepage-list-imgtxt message-content">
            <div class="media-body" id="mainBody">

            </div>
        </div>
        <div class="layui-col-md12 layui-col-sm12">
            <%--分页部分--%>
            <div id="demo0"></div>
        </div>
    </div>
</div>
</body>
<script>
    var cardCount = 1
    let count = [[${book.count}]]
    console.log(count)
    var addCount = 0
    layui.use(['slider', 'layer', 'form'], function () {
        var $ = layui.jquery;
        var slider = layui.slider;
        var layer = layui.layer;
        slider.render({
            elem: '#slideTest8',
            input: true,
            max: count,
            change: function (value) {
                addCount = value
            }
        });
        $(document).on('click', '#chart', function () {
            layer.prompt({
                title: '联系发布者',
                formType: 2
            }, function (value, index) {
                let bookUid = ${book.uid}
                    add(${sessionScope.user.uid}, bookUid, value)
                layer.close(index);
            });
        })
        $(document).on('click', '#addChart', function () {
            if (addCount === 0) {
                layer.msg("数量不能为空")
            } else {
                $.ajax({
                    url: "/user/addChart",
                    data: {
                        "uid":${sessionScope.user.uid},
                        "bid":${book.bid},
                        "count": addCount
                    },
                    success: function (data) {
                        if (data > 0) {
                            layer.msg("添加成功！")
                        } else {
                            layer.msg("添加失败！")
                        }
                    }
                })
            }
        })


        var form = layui.form;
        form.on('submit(formDemo)', function (data) {
            if (data.field.desc == null) {
                layer.msg("评论不能为空!")
            } else {
                $.ajax({
                    url: "/user/comment/add",
                    data: {"cname": data.field.desc, "bid":${book.bid}, "uid":${sessionScope.user.uid}},
                    success: function (data) {
                        if (data > 0) {
                            layer.msg("发表成功！")
                        }
                    }
                })
            }

            return false;
        });
    });

    function changeCard() {
        console.log("触发翻页效果！");
        $("#show_left").css("transform", "rotateY(" + 180 * cardCount + "deg)");
        cardCount += 1;
    }

    function add(fromId, toId, mname) {
        $.ajax({
            type: "get",
            data: {
                "fromId": fromId,
                "toId": toId,
                "mname": mname
            },
            url: "/user/message/sendMessage",
            success: function (date) {
                console.log(date);
                if (date > 0) {
                    layer.msg("发送成功")
                }

            }
        })
    }

    layui.use(['laypage', 'util'], function () {
        var laypage = layui.laypage;
        var util = layui.util;
        //执行一个laypage实例
        laypage.render({
            elem: 'demo0', //注意，这里的 dem0 是 ID，不用加 # 号
            limit: 5,
            count: ${requestScope.commentCount}, //数据总数，从服务端得到
            curr: 1,
            jump: function (obj) {
                $.ajax({
                    url: '/user/comment/commentList',
                    data: {"bid":${book.bid}, "order": "create_date", "page": obj.curr, "limit": obj.limit},
                    success: function (data) {
                        var html = "";
                        for (let i = 0; i < obj.limit; i++) {
                            if (typeof (data[i]) == "undefined") {
                                break;
                            } else {
                                html += '\
                            <div class="pad-btm">\
                                <p class="fontColor"><a href="javascript:;">' + data[i].uname + '</a></p>\
                                <p class="layui-word-aux"><span>' + util.toDateString(data[i].createDate, "yyyy-MM-dd HH:mm:ss") + '</span></p>\
                            </div>\
                            <p class="message-text">' + data[i].cname + '</p>'
                            }
                            $("#mainBody").html(html)
                        }

                    }
                })
            }
        });
    });


</script>
</html>
